<template>
  <!-- //大盒子 -->
  <div>
    <!-- 搜索框 -->
    <van-search shape="round" background="black" placeholder="请输入搜索关键词" />

    <!-- 宫格 -->
    
    <van-grid :border="false" icon-size="45px" :column-num="5">
      <van-grid-item v-for="(item, index) in cate_list.slice(0,10)" :key="index">
        <van-grid-item :icon="item.icon" :text="item.name" />
      </van-grid-item>
    </van-grid>
    <!-- //标题 -->
    <br />
    <p style="text-align:center">附近商家</p>
    <!-- 商家列表 -->
    <div>
      <div v-for="(item, index) in home_list" :key="index" @click="home_list_click(item.mtWmPoiId)">
        <br />
        <van-card
          :price="item.wmPoiScore"
          :desc="item.monthSalesTip"
          :title="item.shopName"
          :thumb="item.picUrl"
        />
      </div>
    </div>
  </div>
  <!-- //大盒子 -->
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      cate_list: [],
      home_list: []
    }
  },
  methods: {
    home_list_click (mtWmPoiId) {
      console.log(mtWmPoiId)
      this.$router.push({
        path: '/category',
        query: {
          mtWmPoiId
        }
      })
    }
  },
  mounted () {
    //主页商品分类
    axios.get('http://localhost:8080/category.json')
      .then(res => {
        console.log(res.data.data.kingkongList)
        this.cate_list = res.data.data.kingkongList
      })
    //主页商家列表
    axios.get('http://localhost:8080/listData.json')
      .then(res => {
        console.log(res.data.data.shopList)
        this.home_list = res.data.data.shopList
      })

  }
};
</script>
<style >
.van-grid-item__content {
  padding: 7px 0px !important;
}
</style>
<style  scoped>
</style>

